<breadcrumb />

<mat-card>
  <mat-card-content>
    <div class="demo-section">
      <span matBadge="4" matBadgeOverlap="false" class="demo-section">Text with a badge</span>
    </div>

    <div class="demo-section">
      <span matBadge="1" matBadgeSize="large" class="demo-section">Text with large badge</span>
    </div>

    <div class="demo-section">
      Button with a badge on the left
      <button
        mat-raised-button
        color="primary"
        matBadge="8"
        matBadgePosition="before"
        matBadgeColor="accent"
      >
        Action
      </button>
    </div>

    <div class="demo-section">
      Button toggles badge visibility
      <button
        mat-raised-button
        matBadge="7"
        [matBadgeHidden]="hidden"
        (click)="toggleBadgeVisibility()"
      >
        Hide
      </button>
    </div>

    <div class="demo-section">
      Icon with a badge
      <mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
      <!-- Include text description of the icon's meaning for screen-readers -->
      <span class="cdk-visually-hidden">
        Example with a home icon with overlaid badge showing the number 15
      </span>
    </div>
  </mat-card-content>
</mat-card>
